<template>
  <view class="recording full-height">
	<u-image
	  class="fixed-img"
	  mode="widthFix"
	  :src="`${host}/static/img${douyin}/4.png`"
	></u-image>
    <view class="fixed-content content">
	<!-- :style="{ top: navigationHeight + 300 + 'rpx'}" -->
      <view class="content-body u-flex u-row-between">
        <u-icon
          class="u-flex-1"
          name="play-left-fill"
          color="#ebd74a"
          size="60"
		  @click="handleChangeGreeting('prev')"
        ></u-icon>
      <!-- <view class="record-content">
          <view class="record-texts">
            <view class="u-font-40 u-text-center record-text">
              内切圆外接圆</view
            >
            <view class="u-font-40 u-text-center record-text">
              祝你阖家团圆
            </view>
            <view class="u-font-40 u-text-center record-text">
              三角形四边形
            </view>
            <view class="u-font-40 u-text-center record-text">
              祝你样样都行
            </view>
          </view>
        </view> -->
		<view class="greeting-wrapper">
			<rich-text :nodes="greetingTxtList[currGreetingTxtIdx]"></rich-text>
		</view>
        <u-icon
          class="u-flex-1"
          name="play-right-fill"
          color="#ebd74a"
          size="60"
		  @click="handleChangeGreeting('next')"
        ></u-icon>
      </view>
	  <view class="recordbg" v-if="longPress==2">
	  	<view class="icon">
	  		<view></view>
	  		<view></view>
	  		<view></view>
	  		<view></view>
	  	</view>
		<view class="txt">录音中...</view>
	  </view>
    </view>
    <u-button
      class="recording-btn"
      type="warning"
      @longpress="longpressBtn"
      @touchend="touchendBtn"
      >{{ longPress == "1" ? "长按录音" : "录音中..." }}</u-button
    >
    <u-button class="next-btn" type="warning" @click="jumpPersonInfo"
      >下一步</u-button
    >
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import { getNavigationInfo } from '@/common/navigation.js'
var app = getApp();
export default {
  data() {
    return {
      host:app.globalData.host,
      douyin:app.globalData.douyin,
      rm: null,
      timer: null,
      init: null,
      count: null, // 录制倒计时
      longPress: "1", // 1显示 按住说话 2显示 说话中
      delShow: false, // 删除提示框显示隐藏
      time: 0, //录音时长
      duration: 60000, //录音最大值ms 60000/1分钟
      tempFilePath: "", //音频路径
      playStatus: 0, //录音播放状态 0:未播放 1:正在播放
	  greetingTxtList: [
		'<div>祝愿老师</div><div>桃李天下</div><div>四时常乐</div>',
		'<div>感恩相遇</div><div>愿您人生尽欢</div><div>爱至圆满</div>',
		'<div>祝愿老师</div><div>像一次函数y=kx(k>0)一样</div><div>蒸蒸日上</div>',
		'<div>一角天地</div><div>四季不歇</div><div>一朝为师</div><div>终身榜样</div>',
		'<div>内切圆外接圆</div><div>祝您阖家团圆</div><div>三角形四边形</div><div>祝您样样都行</div>',
		'<div>祝愿老师</div><div>烦恼无限小</div><div>人气节节高</div><div>每天带着笑</div><div>工资还比别人高</div>',
		'<div>岁月如歌</div><div>师恩难忘</div><div>山水有相逢</div><div>咱们江湖再见</div>',
		'<div>饮其流者怀其源</div><div>学其成时念吾师</div>',
		'<div>春雨润物</div><div>明德育才</div><div>泽流及远</div><div>千里思源</div>',
		'<div>遥遥之愿</div><div>敬赠恩师</div><div>家和百兴</div><div>福临安康</div>'
	  ],
	  currGreetingTxtIdx: 
Math.round(Math.random()*8),
	  navigationHeight: 0
    };
  },
  computed: {},
  methods: {
    ...mapMutations(["changeParamters"]),
    jumpPersonInfo() {
      if (!this.tempFilePath) {
        uni.showToast({
          icon: "none",
          title: "请录音",
          position: "top",
        });
        return;
      } 
      this.changeParamters({ tempFilePath: this.tempFilePath });
      uni.navigateTo({
        url: `/pages/project/personInfo/index`,
      });
    },
    countdown(val) {
      let _then = this;
      _then.count = Number(val);
      this.timer = setInterval(function () {
        if (_then.count > 0) {
          _then.count--;
        } else {
          _then.longPress = "1";
          clearInterval(this.timer);
        }
      }, 1000);
    },
    // 长按录音事件
    longpressBtn() {
      this.longPress = "2";
      this.countdown(60); // 倒计时
      clearInterval(this.timer); // 清除定时器
      const options = {
        duration: this.duration, // 指定录音的时长，单位 ms
        sampleRate: 16000, // 采样率
        numberOfChannels: 1, // 录音通道数
        encodeBitRate: 96000, // 编码码率
        format: "wav", // 音频格式，有效值 aac/mp3
        frameSize: 10, // 指定帧大小，单位 KB
      };
      this.recordingTimer();
      this.rm.start(options);
      // 监听音频开始事件
      this.rm.onStart((res) => {
        console.log(res);
      });
    },
    // 长按松开录音事件
    touchendBtn() {
      this.longPress = "1";
      this.rm.onStop((res) => {
		console.log(res,'touchendBtn')
		if(res.duration < 4000) {
			uni.showToast({
			  icon: "none",
			  title: "录音至少需要4秒,请重新录音",
			  position: "top",
			});
			return 
		}
        uni.showToast({
          icon: "none",
          title: "录音成功",
          position: "top",
        });
        this.tempFilePath = res.tempFilePath;
      });
      this.recordingTimer(this.time);
      this.rm.stop();
    },
    recordingTimer(time) {
      var that = this;

      if (time == undefined) {
        // 将计时器赋值给init
        this.init = setInterval(function () {
          that.time++;
        }, 1000);
      } else {
        clearInterval(this.init);
      }
    },
	handleChangeGreeting(type){
		if(type === 'prev'){
			if(this.currGreetingTxtIdx === 0){
			   this.currGreetingTxtIdx = this.greetingTxtList.length - 1
			} else {
			   this.currGreetingTxtIdx -= 1
			}
		} else if(type === 'next') {
			if(this.currGreetingTxtIdx === this.greetingTxtList.length - 1) {
			   this.currGreetingTxtIdx = 0
			} else {
			   this.currGreetingTxtIdx += 1
			}
		}
	}
  },
  mounted() {
    if (this.rm === null) {
      // 录音管理器如果没有初始化就先初始化
      this.rm = uni.getRecorderManager();
    }
    // uni.authorize({
    //   scope: "scope.record",
    //   success: function () {
    //     if (this.rm === null) {
    //       // 录音管理器如果没有初始化就先初始化
    //       this.rm = uni.getRecorderManager();
    //     }
    //   },
    //   fail(){
    //     uni.showModal({
    //       content:'检测到你没有打开录音功能权限，是否去设置打开？',
    //       confirmText:'确认',
    //       cancelText:'取消',
    //       success(res){
    //         uni.openSetting({
    //           success(r){
    //             console.log(r)
    //           },
    //           fail(r){
    //             showToast({
    //               title:'打开授权设置失败',
    //               icon:'none'
    //             })
    //           }
    //         })
    //       }
    //     })
    //   }
    // });
  },
  beforeDestroy() {
    this.rm = null;
  },
  onShow() {
	const {navigationHeight} = getNavigationInfo()
    console.log('navigationHeight',navigationHeight)
	this.navigationHeight = navigationHeight
  },
  onShareAppMessage() {
  	return {
  		title: '测一测你声音的年龄',
  		path: '/pages/project/home/index',
		imageUrl:'../../../static/sharelogo.jpg'
  	}
   },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.recordbg{
	background-color: #00000069;
	width: 100%;
    height: 15vh;
    position: fixed;
    bottom: 22%;
    z-index: 1000;
    left: 0%;}
	.recordbg .txt{    position: absolute;
    top: 50%;
    left: 0%;
    color: #FFF;
    display: flex;
    justify-content: center;
    width: 100%;}
.icon{    position: absolute;
    top:30%;
    left: 0%;
    width: 100%;
    justify-content: center;
    display: flex;}
.icon> view {
		    background-color: #fff;
		    width: 3px;
		    height: 18px;
		    border-radius: 2px;
		    animation-fill-mode: both;
		    display: inline-block;    margin: 0px 2px;
		    animation: go 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
      }
  .icon> view:nth-child(1), .list> view:nth-child(2) {
            animation-delay: 0.2s; 
        }
 .icon> view:nth-child(3), .list> view:nth-child(4) {
            animation-delay: 0.4s; 
        }
@-webkit-keyframes go
 {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4);
      }
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); 
            } 
      }
@keyframes go
 {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
    }
</style>
